<template>
  <view class="container">

    <view class="admission-box"
          v-for="(item,index) in dataList"
          :key="index">
      <view class="university-name">{{item.universityName}}</view>
      <view class="university-batch">{{item.enrollVolunteerShow}}（{{item.enrollSubjectShow}}）</view>
      <view class="admission-city">生源地：河南</view>
      <view class="table-box">
        <view class="table-row table-row-h">
          <view class="table-col table-col-left"></view>
          <view class="table-col">{{item.enrollYear1}}</view>
          <view class="table-col">{{item.enrollYear2}}</view>
          <view class="table-col border-right-none">{{item.enrollYear3}}</view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left">计划人数</view>
          <view class="table-col">{{item.enrollPlanNum1}}</view>
          <view class="table-col">{{item.enrollPlanNum2}}</view>
          <view class="table-col border-right-none"><strong>{{item.enrollPlanNum3}}</strong></view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left">实际人数</view>
          <view class="table-col">{{item.enrollActualNum1}}</view>
          <view class="table-col">{{item.enrollActualNum2}}</view>
          <view class="table-col border-right-none">{{item.enrollActualNum3}}</view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left">录取最高分</view>
          <view class="table-col">{{item.enrollHighScore1}}</view>
          <view class="table-col">{{item.enrollHighScore2}}</view>
          <view class="table-col border-right-none">{{item.enrollHighScore3}}</view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left">最高分位次</view>
          <view class="table-col">{{item.enrollHighQuantile1}}</view>
          <view class="table-col">{{item.enrollHighQuantile2}}</view>
          <view class="table-col border-right-none">{{item.enrollHighQuantile3}}</view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left">录取最低分</view>
          <view class="table-col">{{item.enrollLowScore1}}</view>
          <view class="table-col">{{item.enrollLowScore2}}</view>
          <view class="table-col border-right-none">{{item.enrollLowScore3}}</view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left">最低分位次</view>
          <view class="table-col">{{item.enrollLowQuantile1}}</view>
          <view class="table-col">{{item.enrollLowQuantile2}}</view>
          <view class="table-col border-right-none">{{item.enrollLowQuantile3}}</view>
        </view>
        <view class="table-row">
          <view class="table-col table-col-left border-bottom-none">批次线</view>
          <view class="table-col border-bottom-none">{{item.enrollBatchLine1}}</view>
          <view class="table-col border-bottom-none">{{item.enrollBatchLine2}}</view>
          <view class="table-col border-right-none border-bottom-none">{{item.enrollBatchLine3}}</view>
        </view>
      </view>
    </view>

    <view class="admission-box">
      <view class="noHave"
            v-if="isShowHave">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
import {
  myRequest,
  http
} from '../../utils'
export default {
  data () {
    return {
      loadingText: '加载中...',
      params: {},
      dataList: [],
      isShowHave: false
    }
  },
  onLoad (options) {
    this.params.id = options.id;
    this.fetchData(this.params)
  },
  methods: {
    fetchData (data = {}) {
      const that = this
      http('/enrollment/list',
        data, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          that.dataList = res.data.data.list
          if (that.dataList.length == 0) {
            that.isShowHave = true
          } else {
            that.isShowHave = false
          }
        }).catch(
          err => {
            console.error(err)
          })
    }
  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}
.noHave {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 32rpx;
  height: 48rpx;
}

.admission-box {
  width: 750rpx;
  background-color: #ffffff;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  margin-top: 20rpx;
}

.university-name {
  font-size: 30rpx;
}

.university-batch {
  font-size: 24rpx;
  color: #999999;
  margin-top: 10rpx;
}

.admission-city {
  font-size: 22rpx;
  color: #fc6216;
  margin-top: 10rpx;
}

.table-box {
  width: 706rpx;
  height: auto;
  border: solid 2rpx #d0dcea;
  margin-top: 30rpx;
  font-size: 30rpx;
}

.table-row-h {
  background-color: #d0dcea;
}

.table-row {
  display: flex;
  flex-direction: row;
}

.table-col {
  width: 150rpx;
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-right: solid 2rpx #d0dcea;
  border-bottom: solid 2rpx #d0dcea;
}

.table-col-left {
  width: 250rpx !important;
}

.border-right-none {
  border-right: none !important;
}

.border-bottom-none {
  border-bottom: none !important;
}
</style>
